<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
    var contentA = 'Hello fanfan';
    var contentB = 'Hello Jimmy';

    function fill(i) {
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.clearRect(0,0,800, 400);
        cxt.font="30px Arial";
        if(i<contentA.length){
            var char = contentA.substring(0, i);
            var char2 = '';
        }else{
            var char = contentA;
            var char2 = contentB.substring(0, i - contentA.length);
        }
        cxt.strokeText(char, 50, 100);
        cxt.strokeText(char2, 300, 200);
    }

    i = 1;
    setInterval(function () {
        fill(i);
        i++;
    }, 400);

</script>
</body>
</html>